import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/layout/index'
import Home from '@/views/home/index'
import About from '@/views/about/index'
import ErrorPage from '@/views/error-page/index'
import Login from '@/views/login/index'
import MenuIndex from '@/views/menu/index'
import MenuCreateOrEdit from '@/views/menu/create-or-edit'
import ResourceCategoryIndex from '@/views/resource-category/index'
import ResourceIndex from '@/views/resource/index'
import store from '@/store/index'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login',
    component: Login
  },
  {
    path: '/',
    name: '',
    component: Layout,
    meta: { requireAuth: true },
    children: [
      {
        path: '/home',
        name: 'home',
        component: Home
      },
      {
        path: '/about',
        name: 'avout',
        component: About
      },
      // 菜单列表
      {
        path: '/menus',
        name: 'menus',
        component: MenuIndex
      },
      // 添加菜单
      {
        path: '/menu/create',
        name: 'menu-create',
        component: MenuCreateOrEdit
      },
      // 编辑菜单
      {
        path: '/menu/:id/edit',
        name: 'menu-edit',
        component: MenuCreateOrEdit
      },
      // 资源分类列表
      {
        path: '/resource-category',
        name: 'resource-category',
        component: ResourceCategoryIndex
      },
      // 资源列表
      {
        path: '/resources',
        name: 'resources',
        component: ResourceIndex
      },
      // 角色
      {
        path: '/roles',
        name: 'roles',
        component: () => import('@/views/role/index')
      },
      // 分配菜单
      {
        path: '/role/:roleId/alloc-menu',
        name: 'alloc-menu',
        component: () => import('@/views/role/alloc-menu'),
        props: true
      },
      // 分配资源
      {
        path: '/role/:roleId/alloc-resource',
        name: 'alloc-resource',
        component: () => import('@/views/role/alloc-resource'),
        props: true
      },
      // 用户列表
      {
        path: '/users',
        name: 'users',
        component: () => import('@/views/user/index')
      },
      // 课程列表
      {
        path: '/courses',
        name: 'courses',
        component: () => import('@/views/course/index')
      },
      // 新增课程
      {
        path: '/courses/create',
        name: 'courses-create',
        component: () => import('@/views/course/create-or-edit')
      },
      // 更新课程
      {
        path: '/courses/:courseId/edit',
        name: 'courses-edit',
        component: () => import('@/views/course/create-or-edit'),
        props: true
      },
      // 内容管理
      {
        path: '/courses/:courseId/content',
        name: 'courses-content',
        component: () => import('@/views/course-content/index'),
        props: true
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: ErrorPage
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (!store.state.tokenInfo) {
      next({
        name: 'login',
        query: {
          redirect: to.fullPath
        }
      })
    }
  }
  next()
})

export default router
